import React, { PureComponent } from 'react'
import { Modal, Table, Form, Input, Button, message } from 'antd'
import { connect } from 'react-redux'
import classNames from 'classnames'
import PropTypes from 'prop-types'

import { getPriceFilter } from 'utils/utils'
import Style from './goodsModal.css'

const { Item } = Form
const { TextArea } = Input
class goodsModal extends PureComponent {
  static propTypes = {
    visible: PropTypes.bool,
    onCancel: PropTypes.func,
    onOk: PropTypes.func,
    form: PropTypes.object,
    childOrderList: PropTypes.array,
    saveChildOrderInfo: PropTypes.func,
    changeOrderCommodity: PropTypes.func
  }

  constructor (props) {
    super(props)
    this.state = {
      goodsInfoCol: [
        {
          title: '商品图片',
          // dataIndex: 'converImgUrl',
          key: 'converImgUrl',
          render: record => (
            <img className={Style['goods-img']} src={record.converImgUrl} alt='img' />
          )
        },
        {
          title: '商品名称',
          dataIndex: 'commodityName'
        },
        {
          title: '价格/货号',
          dataIndex: 'commodityNo'
        },
        {
          title: '属性',
          dataIndex: 'commoditySpec'
        },
        {
          title: '数量',
          dataIndex: 'quantity'
        },
        // {
        //   title: '库存',
        //   dataIndex: ''
        // },
        {
          title: '小计',
          dataIndex: 'commodityPrice',
          render: n => `¥${getPriceFilter(n)}`
        }
      ],
      currentRow: {}
    }
  }

  handleRowClick = (record) => {
    const { form } = this.props
    const { commodityName, commodityPrice, commoditySpec, remark } = record || {}

    form.setFieldsValue({
      commodityName,
      // commodityNo,
      commodityPrice: commodityPrice ? commodityPrice / 100 : 0,
      commoditySpec,
      remark
    })
    this.setState({
      currentRow: record,
      hasChange: false
    })
  }

  handleCancel = () => {
    const { onCancel, form } = this.props
    form.resetFields()
    this.setState({
      hasChange: false
    })
    onCancel()
  }

  handleSave = (e) => {
    e.preventDefault()

    const { form } = this.props
    const { currentRow } = this.state
    const { childOrderId } = currentRow || {}
    if (!childOrderId) {
      message.warning('请选择需要修改的商品')
      return
    }
    form.validateFields((err, values) => {
      if (!err) {
        let commodityPrice = 0
        if (values.commodityPrice) {
          commodityPrice = commodityPrice * 100
        }
        this.props.saveChildOrderInfo({
          ...values,
          commodityPrice,
          childOrderId
        })
        this.setState({
          hasChange: true
        })
      }
    })
  }

  handleSubmit = () => {
    const { hasChange } = this.state
    if (hasChange) {
      this.props.changeOrderCommodity().then(() => {
        this.handleCancel()
      })
    } else {
      this.handleCancel()
    }
  }

  render () {
    const { goodsInfoCol, currentRow } = this.state
    const { visible, childOrderList, form } = this.props
    const { getFieldDecorator } = form
    const formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      }
    }
    return (
      <Modal
        title='修改商品信息'
        width='1148px'
        visible={visible}
        onCancel={this.handleCancel}
        onOk={this.handleSubmit}
      >
        <div className={Style['goods']}>
          <p className={Style['title']}>商品列表</p>
          <Table
            rowKey='childOrderNo'
            columns={goodsInfoCol}
            pagination={false}
            dataSource={childOrderList}
            onRow={record => {
              return {
                onClick: () => this.handleRowClick(record)
              }
            }} />
          <p className={classNames(Style['title'], Style['pt'])}>修改商品信息</p>
          <Form {...formLayout} onSubmit={this.handleSave}>
            <Item label='商品名称' colon={false}>
              {getFieldDecorator('commodityName', {
                rules: [{ required: true, message: '请输入商品名称' }]
                // initialValue: commodityName
              })(<Input style={{ width: 250, marginLeft: 10 }} />)}
            </Item>
            <Item label='货号' colon={false}>
              <div className={Style['ml']}>{currentRow.commodityNo}</div>
              {/* {getFieldDecorator('commodityNo', {
                rules: [{ required: true, message: '请输入货号' }]
                // initialValue: commodityNo
              })(<Input style={{ width: 250, marginLeft: 10 }} />)} */}
            </Item>
            {/* TODO */}
            <Item label='分类' colon={false}>
              <div className={Style['ml']}>{currentRow.categoryNamePath}</div>
            </Item>
            <Item label='创作者' colon={false}>
              <div className={Style['ml']}>{currentRow.authorName}</div>
            </Item>
            <Item label='价格' colon={false}>
              {getFieldDecorator('commodityPrice', {
                rules: [{ required: true, message: '请输入价格' }, { pattern: /^\d*\.?\d*$/, message: '请输入正确的金额' }]
                // initialValue: commodityPrice
              })(<Input prefix='¥' style={{ width: 250, marginLeft: 10 }} />)}
            </Item>
            <Item label='规格' colon={false}>
              {getFieldDecorator('commoditySpec', {
                rules: [{ required: true, message: '请输入规格' }]
                // initialValue: commoditySpec
              })(<Input style={{ width: 250, marginLeft: 10 }} />)}
            </Item>
            <Item label='库存' colon={false}>
              <div className={Style['ml']}>1</div>
            </Item>
            <Item label='修改备注' colon={false} className={Style['textarea']}>
              {getFieldDecorator('ramark', {
                rules: [{ required: true, message: '请输入修改备注' }]
                // initialValue: remark
              })(<TextArea style={{ width: 350, marginLeft: 10 }} />)}
            </Item>
            <Item wrapperCol={
              {
                sm: {
                  span: 20, offset: 4
                }
              }
            }>
              <Button className={Style['ml']} type='primary' htmlType='submit'>
                保存
              </Button>
            </Item>
          </Form>

        </div>
      </Modal>
    )
  }
}

const mapState = state => ({
  childOrderList: state.order.childOrderList
})
const mapDispatch = dispatch => ({
  saveChildOrderInfo: dispatch.order.saveChildOrderInfo,
  changeOrderCommodity: dispatch.order.changeOrderCommodity
})
export default connect(
  mapState,
  mapDispatch
)(Form.create()(goodsModal))
